<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>layout 后台大布局 - Layui</title>

    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}"/>
    <script type="text/javascript" src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <style type="text/css">
        /*body .layui-tree-skin-red .layui-tree-branch{color: red;}*/
    </style>
    <script>
        //JavaScript代码区域
        layui.use(['element', 'tree', 'jquery'], function () {
            var element = layui.element, $ = layui.jquery;
            $(".layui-nav-fold").click(function () {
                $(this).parent().siblings("li").removeClass("layui-nav-itemed");
            })
            //触发事件
            var active = {
                tabAdd: function (othis) {
                    var obj = JSON.parse(othis.attr('options'));
//                    添加一个内联区域，为了拼接字符串使用，如果不添加，则单双引号的嵌套会出问题，且无法拼接 th:src
                    /*<![CDATA[*/
                    var url = '<iframe src="' + obj.url + '" th:src="@{' + obj.url + '}" scrolling="auto" frameborder="0" style="width:100%;height:100%;"></iframe>';
                    /*]]>*/

                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: obj.text, //用于演示
                        content: url,
                        id: obj.id //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                    //添加完tab后要切换到新添加的tab
                    active['tabChange'].call(this, obj.id);
                }
                , tabDelete: function (tabID) {
                    //删除指定Tab项
                    element.tabDelete('demo', tabID); //删除：“商品管理”
                }
                , tabChange: function (tabID) {
                    //切换到指定Tab项
                    element.tabChange('demo', tabID); //切换到：用户管理
                }
            };
            //给菜单栏绑定点击事件，进行tab页操作
            $(document).on("click", '.site-demo-active', function () {
                //点击的导航栏
                var othis = $(this);
                //获取当前点击的菜单对应的tab页。如果存在，则length大于0.直接切换。否则创建新的
                var li = $("li[lay-id=" + othis[0].id + "]").length;
                if (li > 0) {
                    //tab已经存在直接切换tab
                    active['tabChange'].call(this, othis[0].id);
                } else {
                    //创建tab
                    active['tabAdd'].call(this, othis);
                }
            });
        });

    </script>
    <script src="../static/js/accordion.js" th:src="@{/js/accordion.js}" type="text/javascript"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">用户管理中心</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" id="topNav"></ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="../static/images/img0.jpg" th:src="@{/images/img0.jpg}" class="layui-nav-img"/>
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftNav"></ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true" style="margin:0;">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">系统首页</li>
            </ul>
            <div class="layui-tab-content" style="position: absolute; width: 100%;top: 41px; bottom: 0px; left: 0px; ">
                <div class="layui-tab-item layui-show" >首页内容</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

</body>
</html>